<template>
  <div class="home">
    <div class="he">
      <!-- 头部插槽 -->
      <ChaView>
        <img @click="per" src="../assets/left.png" alt=""><br>
        <h5 class="h4">用户注册</h5>
        <div>
          <router-link to="/">登录</router-link>
        </div>
      </ChaView><br><br>
      <el-form :model="ruleForm"  status-icon
        :rules="rules" ref="ruleForm" class="demo-ruleForm">
      <el-form-item prop="user">
        <el-input v-model.number="ruleForm.user" type="text" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item prop="pass">
        <el-input
          type="password"
          v-model="ruleForm.pass"
          autocomplete="off"
          placeholder="请输入密码"            
        ></el-input>
      </el-form-item>
      <el-form-item prop="checkPass">
        <el-input
          type="password"
          v-model="ruleForm.checkPass"
          autocomplete="off"
          placeholder="请确认密码"   
        ></el-input>
      </el-form-item>
          <p class="p"><input type="checkbox" v-model="checkbox">&nbsp;<span>我已经阅读并同意《用户协议》</span></p>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即注册</el-button>
        </el-form-item>
      </el-form>
      <p class="p2">©版权所有</p>
    </div>
  </div>
</template>
<style lang="scss">
.h4{
    margin-top: -25px;
    font-size: 16px;
}
*{
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}
.p2{
  text-align: center;
  font-size: 14px;
  font-weight: 100;
}
.p{
  text-indent: 3%;
  height: 30px;
  input{
    width: 15px;
    height: 15px;
  }
  span{
    line-height: 35px;
    font-weight: 100;
    font-size: 13px;
    line-height: 100%;
  }
}
.el-input{
  margin-top: 2%;
  height:50px;
}
.el-form-item__content{
  line-height: 0px;

}
.el-form-item{
  margin-bottom: 0px;
}
.el-button{
  width: 100vw;
  height: 6vh;
  font-size: 16px;
  background-color: #076FA2;
}
</style>
<script>
import ChaView from '../components/ChaView.vue'
export default {
  components: {
    ChaView
  },
    data() {
     var checkuser = (rule, value, callback) => {
        if (!value === '') {
          return callback(new Error('用户名不能为空'));
        }else if (!/^[a-zA-Z0-9_-]{4,16}$/.test(value)) {
                callback(new Error("请按规则输入"))
        }else {
              callback()
        }
        
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        }else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass',() => null);
          }
          callback();
        }
        
      };
      var validatePass2 = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请再次输入密码'));
        }else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
        
      };
      return {
        checkbox:true,
        ruleForm: {
          pass: '',
          checkPass: '',
          user: '',
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          user: [
            { validator: checkuser, trigger: 'blur' }
          ],
        }
      };
    },
  methods: {
    per() {
        this.$router.go(-1)
      },
     submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        // 判断输入框中的值 并且还有同意阅读协议
        if (valid && this.checkbox!=false) {
          this.axios
            .post("/reg", {
              username: this.ruleForm.user,
              password: this.ruleForm.pass,
            })
            .then((res) => {
              console.log(res);
              if (res.data.errCode == 0) {
                // 提交成功
                this.$message({
                  message: res.data.errMsg,
                  type: "success",
                  duration: 1000,
                });
                this.$router.push("/");
              } else {
                this.$message(res.data.errMsg);
              }
            })
            .catch((err) => {
              console.log(err.status);
            })
        } else {
          this.$message("请输入用户名或密码");
          return false;
        }
      });
    },

    }
  }
</script>


